//Maximum lines that user can create (multiple of 4)
var MAX_BY_USER = 20;
var CURR_LINES	= 0;

//Maximum numbers of lines to animate
const NUMBER_OF_LINES = 12;

function init()
{
	for (var i = 1; i <= NUMBER_OF_LINES; i++) 
	{
		prepLine(i);
	}
}

function prepLine(lineID)
{
	var container;
	lineType = randomInteger(1, 3);
	
	if(lineType == 1){
		container = document.getElementById('linesContainerH');
		container.appendChild(createALine(lineID,lineType));
	} else {
		container = document.getElementById('linesContainerV');
		container.appendChild(createALine(lineID,lineType));
	}	
}

function theEnd(line,recreate)
{
	var container = document.getElementById(line.parentNode.id);
	container.removeChild(line); 	//Remove the div
	
	if(recreate) prepLine(line.id)
	else CURR_LINES--; //User created line
}

function attachEventHandler(line,recreate) {
	line.addEventListener('webkitAnimationEnd', function(event) { theEnd(this,recreate); }, false );
}

function randomInteger(low, high)
{
    return low + Math.floor(Math.random() * (high - low));
}

function randomFloat(low, high)
{
    return low + Math.random() * (high - low);
}

function pixelValue(value)
{
    return value + 'px';
}

function durationValue(value)
{
    return value + 's';
}

function createALine(lineID,lineType)
{
    var lineDiv = document.createElement('div');
    var image = document.createElement('img');
    var lineStyle = 0;

	if(lineType == 1) lineStyle = randomInteger(11, 19); 
	else lineStyle = randomInteger(1, 9); 

	image.src = 'images/line' + lineStyle + '.png';

	if(lineStyle >= 1 && lineStyle <= 4)
	{
		lineDiv.style.top = pixelValue(500);
		lineDiv.style.left = pixelValue(randomInteger(2, 30)*10-3);
		lineDiv.style.webkitAnimationName = 'downup';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(8, 13));
		attachEventHandler(lineDiv,true);
	}
	else if(lineStyle >= 5 && lineStyle <= 8)
	{
		lineDiv.style.top = pixelValue(-314);
		lineDiv.style.left = pixelValue(randomInteger(2, 30)*10-3);
		lineDiv.style.webkitAnimationName = 'updown';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(8, 13));
		attachEventHandler(lineDiv,true);
	}
	else if(lineStyle >= 11 && lineStyle <= 14)
	{
		lineDiv.style.top = pixelValue(ranPosition = randomInteger(2, 46)*10-3);
		lineDiv.style.left = pixelValue(-314);
		lineDiv.style.webkitAnimationName = 'leftright';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(8, 13));
		attachEventHandler(lineDiv,true);
	}
	else if(lineStyle >= 15 && lineStyle <= 18)
	{
		lineDiv.style.top = pixelValue(ranPosition = randomInteger(2, 46)*10-3);
		lineDiv.style.left = pixelValue(340);
		lineDiv.style.webkitAnimationName = 'rightleft';
		lineDiv.style.webkitAnimationDuration = durationValue(randomInteger(8, 13));
		attachEventHandler(lineDiv,true);
	}
	
	lineDiv.setAttribute('id',lineID);
    lineDiv.appendChild(image);
    return lineDiv;
}

function TouchLines(xCoords,yCoords)
{
	//alert(CURR_LINES + ' - ' + CURR_LINES % 4);
	
	if(CURR_LINES < MAX_BY_USER && CURR_LINES % 4 == 0) 
	{
		var lineDiv;
		var image;
		var container;
		var arrayType = randomInteger(1,5);
		
		var LinesArray = [
			[1,6,13,18],
			[4,5,12,17],
			[3,8,11,16],
			[2,7,14,15],
		];
		
		for (var i = 1; i <= 4; i++) 
		{
			switch(i)
			{
				
				case 1:
				{
					container = document.getElementById('linesContainerV');
					lineDiv = document.createElement('div');
					image = document.createElement('img');
					image.src = 'images/line' + LinesArray[arrayType][i-1] + '.png';
					lineDiv.style.top = pixelValue(yCoords-23);
					lineDiv.style.left = pixelValue((Math.floor((xCoords-28)/10)+1)*10-3);
					lineDiv.style.webkitAnimationName = 'downup_new';
					lineDiv.style.webkitAnimationDuration = durationValue(8);
					lineDiv.style.opacity = 0;
					attachEventHandler(lineDiv,false);
					lineDiv.appendChild(image);
					container.appendChild(lineDiv);
					break;
				}
				
				case 2:
				{
					container = document.getElementById('linesContainerV');
					lineDiv = document.createElement('div');
					image = document.createElement('img');
					image.src = 'images/line' + LinesArray[arrayType][i-1] + '.png';
					lineDiv.style.top = pixelValue(yCoords-274+23);
					lineDiv.style.left = pixelValue((Math.floor((xCoords-28)/10)+1)*10-3);
					lineDiv.style.webkitAnimationName = 'updown_new';
					lineDiv.style.webkitAnimationDuration = durationValue(8);
					lineDiv.style.opacity = 0;
					attachEventHandler(lineDiv,false);
					lineDiv.appendChild(image);
					container.appendChild(lineDiv);
					break;
				}
				
				case 3:
				{
					container = document.getElementById('linesContainerH');
					lineDiv = document.createElement('div');
					image = document.createElement('img');
					image.src = 'images/line' + LinesArray[arrayType][i-1] + '.png';
					lineDiv.style.top = pixelValue((Math.floor((yCoords-28)/10)+1)*10-3);
					lineDiv.style.left = pixelValue(xCoords-274+23);
					lineDiv.style.webkitAnimationName = 'leftright_new';
					lineDiv.style.webkitAnimationDuration = durationValue(8);
					lineDiv.style.opacity = 0;
					attachEventHandler(lineDiv,false);
					lineDiv.appendChild(image);
					container.appendChild(lineDiv);
					break;
				}
				
				case 4:
				{
					container = document.getElementById('linesContainerH');
					lineDiv = document.createElement('div');
					image = document.createElement('img');
					image.src = 'images/line' + LinesArray[arrayType][i-1] + '.png';
					lineDiv.style.top = pixelValue((Math.floor((yCoords-28)/10)+1)*10-3);
					lineDiv.style.left = pixelValue(xCoords-23);
					lineDiv.style.webkitAnimationName = 'rightleft_new';
					lineDiv.style.webkitAnimationDuration = durationValue(8);
					lineDiv.style.opacity = 0;
					attachEventHandler(lineDiv,false);
					lineDiv.appendChild(image);
					container.appendChild(lineDiv);
					break;
				}
			}
		}
		
		CURR_LINES = CURR_LINES + 4;
	}
}

window.addEventListener('load', init, false);